<template>
<ul class="fun-list-mod">
	<li class="fun-list-item" v-for='item in data'>
		<img :src="item.img" />
		<div>{{item.title}}</div>
	</li>
</ul>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps({
	data: {
		type: Array,
		required: true,
	}
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fun-list-mod{ display: flex; flex-wrap: wrap;}
.fun-list-mod .fun-list-item{ width: 20%; text-align: center;}
.fun-list-mod .fun-list-item > img{ width: 0.38rem; margin-top: 0.1rem;}
.fun-list-mod .fun-list-item > div{ line-height: 0.18rem; font-size: 0.12rem; margin-top: 0.06rem;}
</style>